<template>
  <div class="common-layout">  
    <el-container>  
      <!-- 侧边栏 -->
      <el-aside width="250px" class="aside">  
        <el-menu default-active="1" class="demo" @open="handleOpen" @close="handleClose" background-color="#304156" text-color="#fff" active-text-color="#3090ff">  

          <el-sub-menu index="1">
            <!-- 第一个模块的名字 -->
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span style="margin-left: -10px;">月考</span>
            </template>

            <!-- 第一个下拉框 -->
            <el-menu-item index="1" style="background: #1f2d3d;"> 
              <router-link to="/" style="color: #bfcbd9;text-decoration: none;">主页</router-link>  
            </el-menu-item>  

            <!-- 第一二个下拉框 -->
            <el-menu-item index="2" style="background: #1f2d3d;">  
              <router-link to="/about" style="color: #bfcbd9;text-decoration: none;">项目管理</router-link>  
            </el-menu-item>  

               <!-- 第一二个下拉框 -->
               <el-menu-item index="3" style="background: #1f2d3d;">  
              <router-link to="/register" style="color: #bfcbd9;text-decoration: none;">用户注册</router-link>  
            </el-menu-item> 

            <!-- 第一二个下拉框 -->
            <el-menu-item index="4" style="background: #1f2d3d;">  
              <router-link to="/login" style="color: #bfcbd9;text-decoration: none;">用户登录</router-link>  
            </el-menu-item>  
            
            <!-- 第一二个下拉框 -->
            <el-menu-item index="5" style="background: #1f2d3d;">  
              <router-link to="/employeelist" style="color: #bfcbd9;text-decoration: none;">用户列表</router-link>  
            </el-menu-item>  


          </el-sub-menu>
        </el-menu> 
      </el-aside>  
      <!-- 中心 -->
      <el-container>  
        <el-main class="main">  
          <router-view/>  
        </el-main>  
      </el-container>  
    </el-container>  
  </div>  
</template>
<script >
export default {  
  methods: {  
    handleOpen(key, keyPath) {  
      console.log(key, keyPath);  
    },  
    handleClose(key, keyPath) {  
      console.log(key, keyPath);  
    }  
  }  
}; 
</script>
<style>
.demo:not(.el-menu--collapse) {  
  width: 250px;  
  min-height: 200vh;  
}
</style>